$(document).ready(function() {
    var cst_Table = {
        "space": 10,
        "rows": 10,
        "columns": 10
    };
    var cst_Frames = [
        {
            "name": "Sensor",
            "content": "frames/sensor/index.html" + location.search,
            "corner": [
                [0, 0],
                [9, 9]
            ]
        }
    ];

    var g_FrameElements = [];

    function RenderFrames() {
        cst_Frames.forEach(function(frame_info) {
            var element = $("<iframe>", {
                "src": frame_info.content
            }).css({
                "position": "absolute",
                "border": 0
            }).appendTo($(document.body));



            g_FrameElements.push(element);
        });
    }

    function ReLayout() {
        var win_width = $(window).width(), win_height = $(window).height();
        var cell_width = (win_width - (cst_Table.columns + 1) * cst_Table.space) / cst_Table.columns;
        var cell_height = (win_height - (cst_Table.rows + 1) * cst_Table.space) / cst_Table.rows;
        for (var idx = 0; idx < g_FrameElements.length; ++idx) {
            var info = cst_Frames[idx];
            var oc_columns = info.corner[1][0] - info.corner[0][0] + 1;
            var oc_rows = info.corner[1][1] - info.corner[0][1] + 1;

            g_FrameElements[idx].css({
                "width": oc_columns * cell_width + (oc_columns - 1) * cst_Table.space,
                "height": oc_rows * cell_height + (oc_rows - 1) * cst_Table.space,
                "top": cst_Table.space + info.corner[0][1] * (cst_Table.space + cell_height),
                "left": cst_Table.space + info.corner[0][0] * (cst_Table.space + cell_width)
            });
        }
    }

    function Initialize() {
        RenderFrames();
        ReLayout();
        $(window).resize(function() {
            ReLayout();
        });
    }

    Initialize();
});
